import { getDetail } from '@/api'
import { useEffect, useState } from 'react';
import { useParams, withRouter } from 'react-router';
import { Card, List, Avatar } from 'antd'
import { Link } from 'react-router-dom'
import { dela } from '@/utils/filter.js'
const Detail = () => {
    const [detail, setDetail] = useState({})
    let { id } = useParams()
    useEffect(() => {
        getDate(id)
    }, [id])
    return (
        <>
            <Card title={detail.title}>
                <div dangerouslySetInnerHTML={{ __html: detail.content }}></div>
                <List
                    dataSource={detail.replies}
                    renderItem={item => (
                        <List.Item>
                            <List.Item.Meta
                                avatar={<Avatar src={item.author.avatar_url} />}
                                title={<Link to={{ pathname: '/user/' + item.author.loginname }}>{item.author.loginname}</Link>}
                                description={(<span dangerouslySetInnerHTML={{ __html: dela(item.content) }}></span>)}
                            />
                        </List.Item>
                    )}
                />
            </Card>
        </>
    );
    function getDate(id) {
        getDetail(id).then((res) => {
            setDetail(res.data)
        })
    }
}

export default withRouter(Detail);